import Vue from "vue";
import VueRouter from "vue-router";
import routes from "./routes";

Vue.use(VueRouter);

const router = new VueRouter({
  // 设置路由的基础地址，用于和项目的工程地址保存一致
  //    在 webpack 工程项目中，存在一个全局属性 process，该属性会记录工程项目运行时的相关配置
  //    包括 vue.config.js 文件中 publicPath
  // base: "/web70/",
  base: process.env.BASE_URL, // 读取vue.config.js中的publicPath属性值
  // 使用hash模式：
  //    在任何环境下，都可以保持路由的正常运行
  // mode: "hash",
  // 使用历史模式
  //    在开发环境下，可以保持路由的正常运行
  //    在打包后的生成环境下，需要对服务器进行配置修改后，才能正常运行，否则会出现刷新页面404的问题
  //    参考：https://v3.router.vuejs.org/zh/guide/essentials/history-mode.html#%E5%90%8E%E7%AB%AF%E9%85%8D%E7%BD%AE%E4%BE%8B%E5%AD%90
  mode: "history",
  // 描述组件和地址的关系 ==> 当URL地址变换后，vue知道该地址应该渲染那个组件
  // 路由中定义的组件 以及被路由进行统一管理，不需要在使用页面中定义为局部组件
  linkActiveClass: "router-link-active",
  linkExactActiveClass: "router-link-exact-active",
  // linkActiveClass: "active",
  // linkExactActiveClass: "eactive",
  routes: routes,
});

// 路由白名单，不需要控制访问权限
const whiteList = ["login", "home"];
// const blackList = [];

// 定义路由全局进入守卫，通过传入回调函数描述，守卫执行方法
router.beforeEach(function (to, from, next) {
  console.log("全局进入守卫=>准备访问：", to.path);
  // if (to.name == "login") {
  //   next(true);
  // } else {
  //   next(false);
  // }

  // 使用白名单
  if (whiteList.includes(to.name)) {
    next(true);
  } else {
    // 是否登录授权
    let userToken = localStorage.getItem("userToken");
    if (userToken !== null) {
      next(true);
    } else {
      alert("请先登录");
      // next(false);
      next({
        name: "login",
      });
    }
  }
});

export default router;
